import react from 'react';

export default class SwiperCom extends react.Component{
    constructor(){
        super();
        this.state={
            bannerList:[]
        }
    }
    swiperInit() {
      new Swiper(".swiper", {
          //   direction: "vertical", // 垂直切换选项
          loop: true, // 循环模式选项
          autoplay:{
            pauseOnMouseEnter: true,
            disableOnInteraction: false,
            delay: 1000,//1秒切换一次
          },
  
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
  
        
        });
    }

    componentDidMount(){
       this.$axios
        .get("https://apipc-xiaotuxian-front.itheima.net/home/banner")
        .then((res) => {
         
          if (res.data.msg == "操作成功") {
            this.state.bannerList = res.data.result;
            this.setState(
                {
                    bannerList:this.state.bannerList
                },
                ()=>{
                    // setState 更新视图完成后的回调函数
                    this.swiperInit();
                }
            )
          }
        });
    }
  
    render(){
        return    <div className="swiper" >
                        <div className="swiper-wrapper">
                            {this.state.bannerList.map( (item,index)=>{
                             return  <div key={index} className="swiper-slide">
                                        <img src={item.imgUrl} alt="" />
                                     </div> 
                            })}
                        </div>
                        <div className="swiper-pagination"></div>
                        <div className="swiper-button-prev"></div>
                        <div className="swiper-button-next"></div>
                </div>
    }    
}